<template>
    <div class="yorha-big-loading-hover">
        <div ref="scanbars" id="scanbars"></div>
        <div id="grid"></div>
        <div class="content">
            <div class="glitch" id="header">
                <h1>L O A D I N G</h1>
                <h3> - BOOTING SYSTEM <span ref="loadDots" id="loadDots">...</span></h3>
            </div>
            <div style="height: 30px"></div>
            <div style="position: relative; left: 30px">
                <div class="glitch" ref="bootText" id="bootText">
                </div>
            </div>
            <div id="yorha">
                <span id="yorhaText">YoRHa</span><br>For the Glory of Mankind
            </div>
        </div>
    </div>
</template>

<script>
import {getCurrentInstance, onMounted} from "vue";

export default {
    name: "YorhaBigLoading",
    props: {
        msg:{
            default:[
                ["Commencing System Check", ""],
                ["Memory Unit: ", "Green"],
                ["Initializing Tactics Log", ""],
                ["Loading Geographic Data", ""],
                ["Vitals: ", "Green"],
                ["Remaining MP: ", "100%"],
                ["Black Box Temperature: ", "Normal"],
                ["Black Box Interal Pressure: ", "Normal"],
                ["Activating IFF", ""],
                ["Activating FCS", ""],
                ["Initializing Pod Connection", ""],
                ["Launching DBU Setup", ""],
                ["Activating Inertia Control System", ""],
                ["Activating Environmental Sensors", ""],
                ["Equipment Authentication: ", "Complete"],
                ["Equipment Status: ", "Green"],
                ["All Systems Green", ""],
                ["Combat Preparations ", "Complete_"]
            ]
        },
        speed:{default: 100},
        closeFn:Function
    },
    setup(props, ctx) {
        let instance = getCurrentInstance()
        let msgLength = 0
        let dianFlag = ''
        let msgFlag = ''
        let xuehuaFlag = ''

        function dian() {
            dianFlag = setInterval(() => {
                let ellipsis = instance.refs.loadDots
                if (ellipsis.innerHTML.length < 3) {
                    ellipsis.innerHTML = (ellipsis.innerHTML + ".");
                } else {
                    ellipsis.innerHTML = '';
                }
            }, 300);
        }

        function systemCheck(j) {
            let length = props.msg[j][0].length;
            let i = 0;
            msgFlag = setInterval(() => {
                instance.refs.bootText.innerHTML += props.msg[j][0].charAt(i);
                i++;
                if (i > length) {
                    instance.refs.bootText.innerHTML += props.msg[j][1] + '<br>';
                    clearInterval(msgFlag);
                    msgLength++
                    if (msgLength <= props.msg.length - 1) {
                        systemCheck(j + 1)
                    } else {
                        setTimeout(()=>{
                            props.closeFn()
                            return
                        },1000)
                    }
                }
            }, props.speed)
        }

        function xuehua() {
            xuehuaFlag = setInterval(() => {
                let scanbar = instance.refs.scanbars
                let size = 1 + Math.floor(Math.random() * 35);
                let location = 1 + Math.floor(Math.random() * 90);
                scanbar.style.paddingTop = size.toString() + "%";
                scanbar.style.bottom = location.toString() + "%"
            }, 20);
        }

        onMounted(() => {
            dian()
            systemCheck(0)
            xuehua()
        })
    }
}
</script>

<script>

</script>

<style lang="less" scoped>
@import "../../style";

.yorha-big-loading-hover {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    font-size: 2.5vh;
    background-color: #1F1B18;
    width: 100vw;
    height: 100vh;
    color: #fff;

    .glitch {
        text-shadow: -2px -2px 1px green, 2px 2px 3px red;
    }

    .content {
        padding: 5vh;
    }

    #scanbars {
        position: absolute;
        margin: 0;
        z-index: 1;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.05);
    }

    #header h1, #header h3 {
        display: inline;
    }

    #header h3 {
        letter-spacing: 0.5vh;
    }

    #header #loadDots {
        letter-spacing: 1vh;
    }

    #bootText {
        white-space: pre;
        line-height: 4vh;
    }

    #yorha {
        color: #35302a;
        z-index: -2;
        position: absolute;
        margin: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 5vh;
        font-family: "HK Grotesk";
        font-weight: bold;
    }

    #yorhaText {
        font-size: 15vh;
        letter-spacing: 3vh;
    }

    #cursor {
        animation: 1s blink step-end infinite;
    }

    #grid {
        background-size: 5px 5px;
        background-image: repeating-linear-gradient(0deg, #000, #000 2px, transparent 1px, transparent 5px), repeating-linear-gradient(-90deg, #000, #000 2px, transparent 1px, transparent 5px);
        height: 100%;
        width: 100%;
        opacity: 0.50;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
}
</style>